<script lang="ts" setup>
  const active = ref(2)
</script>

<template>
  <div class="Process-box">
    <div class="Process-title"><span>资料认证流程</span></div>
    <div class="Time-box">
      <div style="height: 350px">
        <el-steps direction="vertical" :active="active" style="margin-left: 30px; font-weight: 700">
          <el-step>
            <template v-slot:title class="title"><span>第一步</span><span style="margin-left: 20px">填写认证资料</span></template>
            <template v-slot:icon>
              <span class="numbers" :class="{ active: active === 1 }">1</span>
            </template>
            <template v-slot:description class="description">请填写真实个人资料 </template>
          </el-step>
          <el-step>
            <template v-slot:title class="title"><span>第二步</span><span style="margin-left: 20px">等待管理员审核</span></template>
            <template v-slot:icon>
              <span class="numbers" :class="{ active: active === 2 }">2</span>
            </template>
            <template v-slot:description class="description">预计三天审核完成 </template>
          </el-step>
          <el-step>
            <template v-slot:title class="title"><span>第三步</span><span style="margin-left: 20px">认证成功</span></template>
            <template v-slot:icon>
              <span class="numbers" :class="{ active: active === 3 }">3</span>
            </template>
            <template v-slot:description class="description">成功后无法修改认证资料 </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .Process-box {
    background: $blank-color;
    height: 100%;

    .Process-title {
      height: 69px;
      display: flex;
      padding: 0 30px;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      color: $text-color;
      border-bottom: 1px solid $border-color;
      justify-content: space-between;
    }

    .Time-box {
      margin: 0 auto;
      margin-top: 41px;

      .numbers {
        width: 16px;
        height: 16px;
        font-family: 'Arial-BoldMT, Arial';
        font-size: 14px;
        text-align: center;
        line-height: 16px;
        border: 2px solid #c6c9d3;
        color: #c6c9d3;
        font-weight: 700;
      }
      .active {
        color: #0247ea;
        border: 2px solid #0247ea;
        background-color: #e5ecfd;
      }

      :deep(.el-step.is-vertical .el-step__line) {
        width: 1px;
        top: 44px;
        bottom: 20px;
        background-color: #e7e9ef;
      }
      :deep(.el-step__title) {
        font-size: 14px;
        font-weight: 700;
      }
      :deep(.el-step__description) {
        margin-left: 62px;
        font-size: 14px;
      }
      :deep(.el-step__description.is-finish) {
        color: #9198a4;
      }
      :deep(.el-step__title.is-finish) {
        color: #0e162a;
      }
      :deep(.el-step__head.is-finish) {
        .numbers {
          color: #0247ea;
          border-color: #0247ea;
          background-color: #e5ecfd;
        }
      }
      .description {
        font-family: 'Arial-BoldMT, Arial';
        font-size: 14px;
        color: #9198a4;
        line-height: 34px;
        font-weight: 400;
        margin-left: 200px;
      }
      .title {
        font-family: 'Arial-BoldMT, Arial';
        font-size: 14px;
        color: #9198a4;
        line-height: 24px;
        font-weight: 700;
      }
    }
  }
</style>
